<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>电商大数据管理平台</title>
		<link rel="icon" href="icon.ico">
		<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="css/dashboard.css">
		<!--[if lt IE 9]>
			<script src="plugins/html5shiv/html5shiv.min.js"></script>
	    <script src="plugins/respond/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div id="app">
			<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
						<a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></a>
					</div>
					<navbars :acv="bnav"></navbars>
				</div>
			</nav>

			<div class="container-fluid">
				<div class="row">
					<div class="col-sm-3 col-md-2 sidebar">
						<fxnav fx="3"></fxnav>
					</div>
					<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
						<h2 style="color: #0D81F5;"><b>服务站点分析</b></h2>

						<div class="placeholders alert alert-info">
							<h4><img src="images/sx.png" style="margin-left: -24px;margin-top: -3px;">服务站点数量汇总分析</h4>

						</div>

						<div style="width: 100%;">
							<h3 style="width: 90%;padding: 10px 0; text-align: center;">服务站点数量统计报表</h3>
							<div style="text-align: center;width: 90%;padding: 10px 0;font-weight:bold;"><span>全市服务站点数量总数:</span><span id="total">0</span></div>
							<div id="chart1" style="width: 90%;height:600px;"></div>
							<!--<img src="images/report_site.png" />-->
						</div>

					</div>
				</div>
			</div>
		</div>

		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/nav.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					bnav: {
						number: 2,
					},
					area: [],
					totalNum:0,
					businessVolume: []
				},
				computed: {

				},
				mounted: function() {
					this.loadData();
				},
				methods: {
					loadData: function() {
						var vm = this;
						$.ajax({
							type: "get",
							url: "ebb/front/ebb/service/?addressCode=520600000000",
							dataType: "json",
							async: true,
							success: function(data) {
								if(!data) { return; }
								for(var i = 0; i < data.length; i++) {
									vm.area[i] = data[i].addressCode;
									vm.businessVolume[i] = {
										name: data[i].addressCode,
										value: data[i].businessVolume
									};
									vm.totalNum+=parseInt(data[i].businessVolume);
								}
								$("#total").html(vm.totalNum);
								vm.table();
							},
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                if(XMLHttpRequest.status==401){
                                    //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                    // redirect_login();

                                    ShowTip("请先登录！", "success", 1000);
                                    setTimeout(function () {
                                        window.location.href = "login.html"
                                    }, 1000);
                                }
                            }
						});
					},
					table: function() {
						var chart1 = echarts.init(document.getElementById('chart1'));
						option = {
/*							title: {
								text: '服务站点数量统计报表',
								subtext: ' ',
								padding: 10,
								textStyle: {
									fontSize: 24
								},
								x: 'center'
							},*/
							tooltip: {
								trigger: 'item',
								formatter: "{b}: {c} ({d}%)"
							},
							color:['#0765F0', '#6495ed', '#FC3913','#0F9E01','#FCA713','#da70d6','#ff69b4', '#87cefa', '#32cd32', '#ff7f50'],
							//color: ['#ff69b4', '#87cefa', '#da70d6', '#32cd32', '#ff7f50', '#6495ed', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'],
							legend: {
								orient: 'vertical',
								x: '60px',
								data: this.area
							},
							series: [{
								name: '统计报表',
								type: 'pie',
								radius: '75%',
								center: ['50%', '50%'],
								data: this.businessVolume,
								itemStyle: {
									normal: {
										//随机色
										//color: function(value) { return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6); }
									},
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						};
						chart1.setOption(option);
					}
				}
			});
		</script>
	</body>

</html>